<template>
    <el-card style="width: 100%;border-radius: 15px;" shadow="always">
        <div class="tableBox">
            <div class="tableTop">
                <span>设备运行状态</span>
            </div>
            <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" :data="tableData" border
                class="table">
                <el-table-column prop="equipmentName" label="设备名称"></el-table-column>
                <el-table-column prop="mapChineseMap.equipmentStatus.statusChinese" label="设备状态"></el-table-column>
                <el-table-column prop="mapChineseMap.processStatus.statusChinese" label="执行状态"></el-table-column>
                <el-table-column prop="mapChineseMap.scoketSendStatus.statusChinese" label="通讯状态"></el-table-column>
                <el-table-column prop="equipmentStatusUpdateTime" label="更新时间"></el-table-column>
                <el-table-column prop="tableSteporder.processRegionStart" label="起点区域"></el-table-column>
                <el-table-column prop="tableSteporder.processStartPoint" label="起点位置"></el-table-column>
                <el-table-column prop="tableSteporder.processRegionEnd" label="终点区域"></el-table-column>
                <el-table-column prop="tableSteporder.processEndPoint" label="终点位置"></el-table-column>
                <el-table-column prop="tableSteporder.processCreateTime" width="200" label="创建时间"></el-table-column>
                <template v-slot:empty>
                    <el-empty description="暂无数据" />
                </template>
            </el-table>
            <el-pagination style="margin-bottom: 20px;" page-size="50" @current-change="handlePageChange" background
                layout="prev, pager, next" :total="count" />
            <el-dialog v-model="dialogVisibleTask" title="子任务列表" width="80%" draggable>
                <el-table style="margin-top: 10px;width: 100% "
                    :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" :data="tableDataCz" border
                    class="table">
                    <el-table-column prop="processRegionStart" label="起点区域"></el-table-column>
                    <el-table-column prop="processStartPoint" label="起点位置"></el-table-column>
                    <el-table-column prop="processRegionEnd" label="终点区域"></el-table-column>
                    <el-table-column prop="processEndPoint" label="终点位置"></el-table-column>
                    <el-table-column prop="processCreateTime" width="200" label="创建时间"></el-table-column>

                    <template v-slot:empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisibleTask = false">关闭</el-button>

                    </div>
                </template>
            </el-dialog>
        </div>
    </el-card>
    <br />
    <el-card style="width: 100%;border-radius: 15px;" shadow="always">
        <div class="tableBox">
            <div class="tableTop">
                <span>设备异常状态</span>
            </div>
            <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" :data="store.messages" border
                class="table">
                <el-table-column label="设备信息">
                    <el-table-column prop="id" label="设备id">
                    </el-table-column>
                </el-table-column>
                <el-table-column label="设备状态">

                    <el-table-column label="急停">
                        <template #default="scope">
                            <div v-if="scope.row.status.e_stop == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="模式">
                        <template #default="scope">
                            <div v-if="scope.row.status.manual_mode == 0">手动</div>
                            <div v-else>自动</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="坐标">
                        <template #default="scope">
                            <div v-if="scope.row.status.coordinates_unknown == 0">坐标未知</div>
                            <div v-else>{{ scope.row.status.coordinates_unknown }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="电量">
                        <template #default="scope">
                            <div v-if="scope.row.status.low_power == 0">电量低</div>
                            <div v-else>
                                {{ scope.row.status.low_power }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="雷达">
                        <template #default="scope">
                            <div v-if="scope.row.status.lidar_stop_signal == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="超声波">
                        <template #default="scope">
                            <div v-if="scope.row.status.ultrasonic_stop_signal == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="减速">
                        <template #default="scope">
                            <div v-if="scope.row.status.ultrasonic_deceleration_signal == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="外部">
                        <template #default="scope">
                            <div v-if="scope.row.status.out_deceleration == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="停车">
                        <template #default="scope">
                            <div v-if="scope.row.status.out_stop == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="出边">
                        <template #default="scope">
                            <div v-if="scope.row.status.save_signal == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="载货">
                        <template #default="scope">
                            <div v-if="scope.row.status.load == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="软停">
                        <template #default="scope">
                            <div v-if="scope.row.status.soft_stop == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="复位">
                        <template #default="scope">
                            <div v-if="scope.row.status.need_reset == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="挂起">
                        <template #default="scope">
                            <div v-if="scope.row.status.halted == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="断开">
                        <template #default="scope">
                            <div v-if="scope.row.status.disconnected == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="阻塞">
                        <template #default="scope">
                            <div v-if="scope.row.status.traffic_blocked == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="精度">
                        <template #default="scope">
                            <div v-if="scope.row.status.low_position_accuracy == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="线路">
                        <template #default="scope">
                            <div v-if="scope.row.status.deviating_line == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="超时">
                        <template #default="scope">
                            <div v-if="scope.row.status.action_timeout == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="到位">
                        <template #default="scope">
                            <div v-if="scope.row.status.ext_arrived == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="离线">
                        <template #default="scope">
                            <div v-if="scope.row.status.not_online == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="上线">
                        <template #default="scope">
                            <div v-if="scope.row.status.getting_online == 0" class="droptarget g"></div>
                            <div v-else class="droptarget r"></div>
                        </template>
                    </el-table-column>
                </el-table-column>
                <template v-slot:empty>
                    <el-empty description="暂无数据" />
                </template>
            </el-table>
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { selectTableEquipmentMachineAll } from '@/api'
import { Alex } from '@/types';
import { ElMessage, ElMessageBox } from 'element-plus';
import { piniaData } from '@/store';//引入pinia状态管理
const store = piniaData()
const page = ref(1)
const count = ref(0)
const dialogVisibleTask = ref(false);
const tableData = ref([]);
const tableDataCz = ref([]);
onMounted(() => {
    selectTableEquipmentMachineAll(alex).then((res: any) => {
        tableData.value = res.result.list
    })
})
const alex = new Alex
const handlePageChange = (val: any) => {
    page.value = val;

}
const upd = (val: any) => {
    tableDataCz.value = val.tableSteporder
    dialogVisibleTask.value = true

}

</script>
<style scoped>
.table {
    height: 30vh;
    margin: 0px auto 20px auto;
    width: 98%;
}

.r {
    background-color: red;
}

.g {
    background-color: green;
}

.droptarget {

    width: 20px;
    height: 20px;
    margin: 0 auto;

    padding: 5px;
    z-index: 200px;
    border-radius: 100%;
    text-align: center;
    border: 1px solid #aaaaaa;
}

span {
    cursor: pointer;
}

:deep(.el-card__body) {
    padding: 0;
}

/* :deep(.el-input__wrapper) {
    background-color: #252547;
    border-color: #13132b;
    color: #fff;
    box-shadow: none;
}
*/
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background: #36f;
}

.tableBox {
    box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
    border: 1px solid #e9e9eb;
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tableTop {
    width: 100%;
    margin-bottom: 20px;
    padding: 0.8rem;
    color: black;
    /* height: 32px; */
    font-weight: 600;
    border-bottom: 2px solid #e9e9eb;
}

.box {
    /* width: 1600px; */
    display: flex;
    height: 80vh;
    margin: 0 auto;
}

/* 
:deep(.el-table) {
    font-size: 12px;
    --el-table-border-color: #2e6099;
    border-radius: 4px;
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #2e6099;
}

:deep(.el-table--fit) {
    backdrop-filter: blur(1px);
    background-color: #222b45;
}

:deep(.el-table thead.is-group th.el-table__cell) {
    color: black;
    color: white;
    backdrop-filter: blur(1px);
    font-weight: bold;
}

:deep(.el-table th.el-table__cell) {
    backdrop-filter: blur(1px);
    background-color: #222b45;
}

:deep(.el-table thead.is-group th.el-table__cell:hover) {
    color: black;
}

:deep(.el-table tr) {
    background-color: #ffffff00;
    color: white;
}

:deep(.el-table tr:hover) {
    background-color: #222b45;
}

:deep(.el-table td:hover) {
    background-color: #222b45;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
    background-color: #323e61 !important;
} */
</style>